import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class YJTabs extends StatefulWidget {
  /// 点击切换时回调index
  Function(int index) onFunction;

  /// 内容集合
  List<BarItem> tabs;

  /// item高度
  double? tabBarHeight;

  /// 指示器 是否显示
  final bool? isIndicator;

  /// 圆角
  double? radius;

  /// 字体大小
  final double? labelSize;

  /// 未选中字体大小
  final double? unselectedLabelSize;

  /// 选中label颜色
  final Color? labelColor;

  /// 未选中label颜色
  final Color? unselectedLabelColor;

  YJTabs(
      {Key? key,
      required this.onFunction,
      required this.tabs,
      this.tabBarHeight,
      this.radius = 50,
      this.isIndicator = false,
      this.labelSize,
      this.unselectedLabelSize,
      this.labelColor,
      this.unselectedLabelColor})
      : super(key: key);

  @override
  State<YJTabs> createState() => _YJTabsState();
}

class _YJTabsState extends State<YJTabs> {
  double width = 80;
  int currentIndex = 0;
  double? labelSize;
  double? unselectedLabelSize;
  Color? labelColor;
  Color? unselectedLabelColor;

  @override
  void initState() {
    super.initState();
    int length = widget.tabs.length;
    if (length > 0) {
      width = YJSize.screenWidth / length;
    }
    labelSize = widget.labelSize ?? YJSize.SP_14;
    unselectedLabelSize = widget.unselectedLabelSize ?? YJSize.SP_14;

    labelColor = widget.labelColor ?? YJColors.BLACK85;
    unselectedLabelColor = widget.unselectedLabelColor ?? YJColors.BLACK25;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: YJColors.TRANSPARENT,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: List<Widget>.generate(widget.tabs.length, (int index) {
          return buildItemView(widget.tabs[index], index);
        }).toList(),
      ),
    );
  }

  Widget buildItemView(BarItem item, int index) {
    bool isSelect = currentIndex == index;
    Color bgColor = item.backgroundColor ?? YJColors.TRANSPARENT;
    return InkWell(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      hoverColor: Colors.transparent,
      onTap: () {
        setState(() {
          currentIndex = index;
          widget.onFunction(index);
        });
      },
      child: Stack(
        children: [
          Align(
            child: Container(
              width: width,
              decoration: BoxDecoration(
                  color: isSelect == true ? bgColor : YJColors.TRANSPARENT,
                  borderRadius: BorderRadius.all(Radius.circular(50))),
              height: widget.tabBarHeight ?? YJSize.dp(40),
              alignment: Alignment.center,
              child: buildTextIcon(item, isSelect),
            ),
            alignment: Alignment.center,
          ),
          Align(
            child: isSelect ? indicatorView() : SizedBox(),
            alignment: Alignment.bottomCenter,
          )
        ],
      ),
    );
  }

  Widget indicatorView() {
    if (widget.isIndicator == false) {
      return SizedBox();
    }
    return Container(
      alignment: Alignment.center,
      height: YJSize.dp(2),
      width: width,
      child: Container(
        width: width / 2,
        height: YJSize.dp(2),
        decoration: BoxDecoration(
            color: labelColor,
            borderRadius: BorderRadius.all(Radius.circular(8))),
      ),
    );
  }

  Widget buildTextIcon(BarItem item, bool isSelect) {
    if (item.type == YJBarItemType.TEXT) {
      if (item.label == null) {
        return SizedBox();
      }
      return Text(
        item.label!,
        style: TextStyle(
            fontSize: isSelect ? labelSize : unselectedLabelSize,
            color: isSelect ? labelColor : unselectedLabelColor),
      );
    } else if (item.type == YJBarItemType.ICON) {
      if (item.icon == null || item.unIcon == null) {
        return SizedBox();
      }
      return isSelect ? item.icon! : item.unIcon!;
    } else if (item.type == YJBarItemType.TEXT_OR_ICON) {
      if (item.label == null || item.icon == null || item.unIcon == null) {
        return SizedBox();
      }
      return Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: isSelect ? item.icon! : item.unIcon!,
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Text(
              item.label!,
              style: TextStyle(
                  fontSize: isSelect ? labelSize : unselectedLabelSize,
                  color: isSelect ? labelColor : unselectedLabelColor),
            ),
          )
        ],
      );
    } else {
      return SizedBox();
    }
  }

  /// 图片加载
  Widget imageLoad(String? image, {double? width}) {
    if (image == null) {
      return const SizedBox();
    }
    if (image.contains("http")) {
      return imageNetWork(image, width);
    } else {
      return Image.asset(image, width: width, height: width, fit: BoxFit.fill);
    }
  }

  Center imageNetWork(String image, double? width) {
    return Center(
      child: Image.network(
        image,
        height: width,
        fit: BoxFit.fill,
        errorBuilder: (context, error, stackTrace) {
          return Container(
              width: width,
              height: width,
              decoration: const BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.all(Radius.circular(15))));
        },
      ),
    );
  }
}
